<template>
	<div class="box">
		<left_popup></left_popup>
		<rightLegend v-if="leftLegendShow"></rightLegend>
		<leftLegend v-if="rightLegendShow"></leftLegend>
		<div id="map" ref="mapRef" class="map-container">
			<!-- <div id="scale-line" class="scale-line"></div> -->
			<router-view />
		</div>
		<div id="map1" ref="mapRef" class="map-container">
			<!-- <div id="scale-line" class="scale-line"></div> -->
			<router-view />
		</div>
	</div>
</template>

<script setup lang="ts">
import mapTool from "@/utils/maptools/map";
import { Map } from "ol/Map";
import left_popup from "./left_popup.vue";
import rightLegend from "../ai-processing/right-legendShp.vue";
import leftLegend from "./left-legendShp.vue";
import { useTaskStore } from "@/store";
import { unByKey } from "ol/Observable";
// import { throttle } from 'lodash';
let map: Map;
let map1: Map;
const taskStore = useTaskStore();
const leftLegendShow = computed(() => taskStore.leftLegendShow);
const rightLegendShow = computed(() => taskStore.rightLegendShow);
onMounted(() => {
	map = mapTool.initMap(["img_", "cia_", "ibo_"], "map", "ai-interpretation", {
		scaleLine: "scale-line",
	});
	map1 = mapTool.initMap(["img_", "cia_", "ibo_"], "map1", "ai-interpretation1", {
		scaleLine: "scale-line",
	});
	syncView(map, map1);
	syncView(map1, map);
	// map?.addEventListener("pointermove", mouseMoveEvent);
	// // openlayers中无鼠标移出事件，这里使用dom元素代替
	// mapRef.value.addEventListener("mouseout", mouseOutEvent);
});
const throttle = (func, limit) => {
	let lastFunc;
	let lastRan;

	return function (...args) {
		if (!lastRan) {
			func.apply(this, args);
			lastRan = Date.now();
		} else {
			clearTimeout(lastFunc);
			lastFunc = setTimeout(() => {
				if (Date.now() - lastRan >= limit) {
					func.apply(this, args);
					lastRan = Date.now();
				}
			}, limit - (Date.now() - lastRan));
		}
	};
};

const syncView = (sourceMap: any, targetMap: any) => {
	const sourceView = sourceMap.getView();
	const targetView = targetMap.getView();

	// const updateTargetView = () => {
	// 	targetView.setCenter(sourceView.getCenter());
	// 	targetView.setResolution(sourceView.getResolution());
	// };
	const updateTargetView = throttle(() => {
		console.log("update");

		targetView.setCenter(sourceView.getCenter());
		targetView.setResolution(sourceView.getResolution());
	}, 10); // 每 100 毫秒调用一次
	// 监听视图变化事件
	sourceView.on("change:center", updateTargetView);
	sourceView.on("change:resolution", updateTargetView);
	sourceMap.on("wheel", (event) => {
		event.preventDefault(); // 阻止默认滚轮事件

		const delta = event.originalEvent.deltaY; // 获取滚轮滚动值
		console.log(delta);

		const currentResolution = sourceView.getResolution();
		const minResolution = sourceView.getMinResolution(); // 获取最小分辨率
		const maxResolution = sourceView.getMaxResolution(); // 获取最大分辨率

		// 调整灵敏度，这里根据 delta 值判断是放大还是缩小
		let newResolution = delta > 0 ? currentResolution * 1.2 : currentResolution * 0.8;

		// 确保新分辨率在最大和最小范围之间
		if (newResolution < minResolution) {
			newResolution = minResolution;
		} else if (newResolution > maxResolution) {
			newResolution = maxResolution;
		}

		sourceView.setResolution(newResolution);
	});
};
// const syncView = (sourceMap: any, targetMap: any) => {
// 	const sourceView = sourceMap.getView();
// 	const targetView = targetMap.getView();
// 	let listenerKey;

// 	const updateTargetView = () => {
// 		if (listenerKey) {
// 			unByKey(listenerKey); // 防止重复添加事件监听器
// 		}

// 		// 同步视图，但不频繁调用
// 		listenerKey = targetView.once("change:center", () => {
// 			targetView.setCenter(sourceView.getCenter());
// 		});
// 		listenerKey = targetView.once("change:resolution", () => {
// 			targetView.setResolution(sourceView.getResolution());
// 		});
// 	};

// 	// 监听滚轮结束后的视图变化
// 	sourceView.on("change:center", updateTargetView);
// 	sourceView.on("change:resolution", updateTargetView);
// };
</script>

<style scoped lang="scss">
.box {
	position: absolute;
	top: 4rem;
	left: 70px;
	// width: 100%;
	width: calc(100% - 70px);
	height: 100%;
	display: flex;
}
.map-container {
	// position: absolute;
	// top: 0;
	// left: 0;
	width: 50%;
	height: 100%;
	.pointer-coordinate {
		display: none;
		position: fixed;
		right: 25px;
		bottom: 5px;
		font-size: 14px;
		color: rgba(255, 255, 255, 1);
		z-index: 2023;
		span {
			display: inline-block;
			padding: 0 16px;
		}
	}
	.scale-line {
		position: fixed;
		bottom: 10px;
		left: 125px;
		font-size: 14px;
		color: #fff;
		text-align: center;
		z-index: 2023;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 70%;
			width: 100%;
			border: 1px solid #fff;
			border-top: 0;
		}
	}
	.map-tool {
		position: fixed;
		top: 220px;
		right: 20px;
		z-index: 10;
	}
	.feature-edit {
		position: fixed;
		top: 86px;
		left: 50%;
		transform: translateX(calc(-50% - 48px));
		z-index: 10;
	}
	.back {
		display: flex;
		align-items: center;
		position: fixed;
		top: 200px;
		left: 50px;
		z-index: 1;
		padding: 10px 15px 10px 5px;
		font-size: 14px;
		color: #fff;
		border-radius: 6px;
		background: linear-gradient(180deg, #083dc6 0%, #159eeb 100%);
		cursor: pointer;
		&:hover {
			opacity: 0.9;
		}
		&:active {
			opacity: 0.7;
		}
		i {
			margin-left: 5px;
			width: 24px;
			height: 24px;
			background: url("../../../assets/images/selectTop.png");
		}
	}
}
</style>
